import React, { Component } from 'react'
import "./uploadwork.scss"
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer' 
import { getApiUpload , getApiGetWork , getApiGetWorkInfo , getApiEditWork } from '../../axios/api'
import { get , UrlSearch } from '../../axios/localstorage'
import { message , Spin } from 'antd'

export default class uploadwork extends Component {

    state = {
        fileName:"",
        videoUrl:"",
        videoSrc:"",
        source:"",
        name:"",
        desc:"",
        info:"",
        loading:false,
        loading2:false,
    }

    componentWillMount(){
        let id = UrlSearch('id');
        this.setState({
            id
        })

        this.getInfo(id);
    }

    getInfo=(id)=>{
        let param = {
            id:id,
            token:get('token'),
            type:get('type')?get('type'):0
        }

        getApiGetWorkInfo(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    source:data.source,
                    fileName:data.source,
                    videoUrl:data.video,
                    videoSrc:data.video_text,
                    name:data.title,
                    desc:data.introduction,
                    info:data.remake,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }
    

    gotoLoadImg=(event)=>{
        let file = event.target.files[0];

        console.log(file);

        this.setState({
            
            loading2:true,
        })

        let fd = new FormData()
    
        fd.append('file', file)
        fd.append('token', get('token'));
        // fd.append('type',2);

        getApiUpload(fd)
        .then( req =>{
            console.log(req.data);
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    source:data.url,
                    fileName:file.name,
                    loading2:false,
                })
            }
        }).catch( err =>{
            console.error(err)
        })

    }

    gotoLoadVdieo=(event)=>{
        this.setState({
            loading:true
        })
        let file = event.target.files[0];

        console.log(file);
        let fd = new FormData()
    
        fd.append('file', file)
        fd.append('token', get('token'));
        // fd.append('type',2);

        getApiUpload(fd)
        .then( req =>{
            console.log(req.data);
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    videoUrl:data.url,
                    videoSrc:data.fullurl,
                    loading:false
                })
            }
        }).catch( err =>{
            console.error(err)
        })

    }

    gotoPush=()=>{

        if(!this.state.name){
            message.info("请先输入作品名称！");
            return false;
        }

        

        if(this.state.loading){
            message.info("请先等待视频上传完成！");
            return false;
        }

        if(!this.state.videoUrl){
            message.info("请先上传作品！");
            return false;
        }

        if(this.state.loading2){
            message.info("请先等待源文件上传完成！");
            return false; 
        }

        let param = {   
            token:get('token'),
            title:this.state.name,
            introduction:this.state.desc,
            remake:this.state.info,
            video:this.state.videoUrl,
            url:this.state.videoSrc,
            source:this.state.source,
            type:get('type')?get('type'):0,
        }

        this.setState({
            showLoading:true,
        })

        getApiGetWork(param)
        .then( req =>{
            if(req.data.code === 1){
                // message.success(req.data.msg);
                this.setState({
                    fileName:"",
                    videoUrl:"",
                    videoSrc:"",
                    source:"",
                    name:"",
                    desc:"",
                    info:"",
                })
                this.setState({
                    showLoading:false,
                    alert:true,
                })
            }else{
                message.info(req.data.msg);
                this.setState({
                    showLoading:false
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoEdit=()=>{

        if(!this.state.name){
            message.info("请先输入作品名称！");
            return false;
        }

        if(!this.state.videoUrl){
            message.info("请先上传作品！");
            return false;
        }

        // this.setState({
        //     showLoading:true,
        // })
        let param = {   
            token:get('token'),
            title:this.state.name,
            introduction:this.state.desc,
            remake:this.state.info,
            video:this.state.videoUrl,
            url:this.state.videoSrc,
            source:this.state.source,
            id:this.state.id,
            type:get('type')?get('type'):0,
        }

        getApiEditWork(param)
        .then( req =>{
            if(req.data.code === 1){
                message.success(req.data.msg);
                this.setState({
                    fileName:"",
                    videoUrl:"",
                    videoSrc:"",
                    source:"",
                    name:"",
                    desc:"",
                    info:"",
                })
                window.history.go(-1);
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    render() {
        return (
            <div className='uploadwork'>
                <Header />
                <div className='page1' style={{backgroundImage:"url('assets/img/zuopin.png')"}}>
                    <div className='pm'>
                        <div className="cleft">
                            <img className="img" alt="" src="assets/imgs/dingwei.png" />
                            <p className="p_point" onClick={()=>{
                                if(get('type')){
                                    // this.gotoPage('/index')
                                    this.gotoPage('/home')
                                  }else{
                                    this.gotoPage('/home')
                                  }
                            }}>首页</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p className="p_point" onClick={()=>{this.gotoPage('/works')}}>作品展示</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p>上传作品</p>
                        </div>
                        <div className='name'>
                            <img alt="" src="assets/img/zuopinzhanshi.png" />
                            <h2>作品展示</h2>
                            <p>优秀作品，海量观看</p>
                        </div>
                    </div>  
                </div>

                <div className='page2'>
                    <div className='pm'>
                        <div className='box'>
                            <div className='name'>
                                <span></span>
                                <h2>作品信息</h2>
                            </div>
                            <div className='blist'>
                                <div className='bitem'>
                                    <h2><span>*</span>作品名称</h2>
                                    <input type="text" placeholder="请输入作品名称" value={this.state.name} onChange={(ev)=>{this.setState({name:ev.target.value})}} />
                                </div>
                                <div className='bitem'>
                                    <h2><span></span>作品简介</h2>
                                    <input type="text" placeholder="请输入作品简介" value={this.state.desc} onChange={(ev)=>{this.setState({desc:ev.target.value})}} />
                                </div>
                                <div className='bitem'>
                                    <h2><span></span>备注</h2>
                                    <input type="text" placeholder="请输入相关备注" value={this.state.info} onChange={(ev)=>{this.setState({info:ev.target.value})}} />
                                </div>
                            </div>
                        </div>

                        <div className='box2'>
                            <div className='name'>
                                <span></span>
                                <h2>作品视频</h2>
                                <p>（最多上传/导入1个视频，单个视频不超过500M）</p>
                            </div>

                            <div className='binfo' hidden={!this.state.loading}>
                                <div className='camera c_cen'>
                                    <Spin size="large" tip="上传中..."></Spin>
                                </div>
                            
                            </div>

                            <div className='binfo' hidden={this.state.loading}>

                                <video className='video' hidden={!this.state.videoUrl} controls src={this.state.videoSrc} />

                                <div className='camera' hidden={this.state.videoUrl}>
                                    <div className='cen'>
                                        <img alt='' src='assets/img/zuopinshiping.png' />
                                    </div>
                                    <p>支持MP4格式</p>
                                    <p>单个视频不超过500M</p>
                                    <input value="" className='load' onChange={(ev)=>{this.gotoLoadVdieo(ev)}} type="file" accept="video/*" id="inputFile"  />
                                </div>
                            </div>
                        </div>

                        <div className='box3'>
                            <div className='name'>
                                <span></span>
                                <h2>作品源文件</h2>
                            </div>
                            <div className='upload'>
                                <div>
                                    <div className='ubtn'>
                                        {this.state.loading2?"上传中...":"上传源文件"}
                                        <input value="" className='load' onChange={(ev)=>{this.gotoLoadImg(ev)}} type="file" accept="*" id="inputFile"  />
                                    </div>
                                    <h4>已上传的文件无法进行删除</h4>
                                </div>
                                
                                <div className='utext'>
                                    <img hidden={!this.state.fileName} className='icon' alt='' src="assets/img/yuanwenjian.png" />
                                    <p hidden={!this.state.fileName}>{this.state.fileName}</p>
                                </div>
                            </div>
                        </div>

                        <div className='cen' hidden={this.state.showLoading}>
                            <button hidden={this.state.id} onClick={()=>{this.gotoPush()}}>上传作品</button>
                            <button hidden={!this.state.id} onClick={()=>{this.gotoEdit()}}>修改作品</button>
                        </div>
                        <div className='cen' hidden={!this.state.showLoading}>
                            <button className='btn2'>上传中...</button>
                        </div>
                    </div>

                    <div className='alert' hidden={!this.state.alert}>
                        <div className='abox'>
                            <div className='cen'>
                                <img alt="" src="assets/imgs/chenggong.png" />
                            </div>
                            <h2>提交成功！</h2>
                            <p>作品已提交成功，等待后台审核</p>
                            <p>您可在“个人中心-我的作品”中查看审核进度</p>
                            <div className='cen'>
                                <button className='btn3' onClick={()=>{this.setState({alert:false})}}>好的，知道了</button>
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
